import React, { Component } from 'react';
import axios from './../../axios';
import { Row, Col, Divider, Upload, message } from 'antd';
import { LoadingOutlined, PlusOutlined } from '@ant-design/icons';
import baseURL from './../../config/baseurl';
import bg from './../../statics/img/panyasuo.png';
import jqmlogo from './../../statics/img/panlogo.png';
import { connect } from 'react-redux';
let errcount = 0;
let bgerrcount = 0;
class Lately extends Component {
	state = {
		loading: false,
		loadingBg: false,
		logoImgUrl: baseURL + "/static/media/system_logo.png",
		bgImgUrl: baseURL + "/static/media/system_background.png",
	};
	
	//上传logo大小类型限制
	beforeUpload = (file) => {
		const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png';
		if (!isJpgOrPng) {
			message.error('只能上传JPG/PNG图片!');
		}
		const isLt100K = file.size / 1024 < 100;
		if (!isLt100K) {
			message.error('文件大小不能超过100KB!');
		}
		return isJpgOrPng && isLt100K;
	}
	
	customRequest = (option) => {
		this.setState({loading: true})
		const formData = new FormData();
		formData.append('img',option.file);
		axios.upload({
			url: "/Manager/UploadMng/upSystemLogo",
			data: formData
		}).then(res=>{
			if(res.code === 0){
				this.setState({
					loading: false,
					logoImgUrl: baseURL + "/static/media/system_logo.png?"+Date.now()
				});
				message.success(res.msg);
				this.props.changeHeadImg(true);
				this.forceUpdate();
			}else{
				message.error("上传文件失败");
				this.setState({loading: false})
			}
		}).catch(err=>{
			this.setState({loading: false})
		})
	}
	
	customRequestbg = (option) => {
		this.setState({loadingBg: true})
		const formData = new FormData();
		formData.append('img',option.file);
		axios.upload({
			url: "/Manager/UploadMng/upSystemBackground",
			data: formData
		}).then(res=>{
			if(res.code === 0){
				this.setState({
					loadingBg: false,
					bgImgUrl: baseURL + "/static/media/system_background.png?"+Date.now()
				});
				message.success(res.msg);
				this.props.changeHeadImg(true);
			}else{
				message.error("上传文件失败");
				this.setState({loadingBg: false})
			}
		}).catch(err=>{
			this.setState({loadingBg: false})
		})
	}
	
	//logo加载失败
	logoImgError = () => {
		errcount++;
		if(errcount > 2){
			return
		}
		this.setState({
			logoImgUrl: jqmlogo
		})
	}
	
	//bg背景图加载失败显示默认图片
	bgImgError = () => {
		bgerrcount++;
		if(bgerrcount > 2){
			return
		}
		this.setState({
			bgImgUrl: bg
		})
	}
	
	render(){
		const { loading, loadingBg, logoImgUrl, bgImgUrl } = this.state;
		const uploadButton = (
			<div>
				{loading ? <LoadingOutlined /> : <PlusOutlined />}
				<div className="ant-upload-text">上传</div>
			</div>
		);
		const uploadButtonBg = (
			<div>
				{loadingBg ? <LoadingOutlined /> : <PlusOutlined />}
				<div className="ant-upload-text">上传</div>
			</div>
		);
		return (
			<div style={{padding: 20}}>
				{/*<Divider orientation="left" style={{ color: '#333', fontWeight: 'normal' }}>
					主题色
				</Divider>
				<Row>
					<Col span={4}></Col>
					<Col span={5}>
						<Color />
					</Col>
				</Row>*/}
				<Divider orientation="left" style={{ color: '#333', fontWeight: 'normal' }}>
					网站logo
				</Divider>
				<Row>
					<Col span={4}></Col>
					<Col span={10}>
						<Upload
							listType="picture-card"
							showUploadList={false}
							customRequest={this.customRequest}
							beforeUpload={this.beforeUpload}
						>
							{loading ? 
								uploadButton : 
								<img 
									src={logoImgUrl} 
									alt="logo" 
									style={{ width: '100%' }}
									onError={this.logoImgError}
								/>
							}
						</Upload>
					</Col>
				</Row>
				<Divider orientation="left" style={{ color: '#333', fontWeight: 'normal' }}>
					登录页背景图
				</Divider>
				<Row>
					<Col span={4}></Col>
					<Col span={10}>
						<Upload
							listType="picture-card"
							showUploadList={false}
							customRequest={this.customRequestbg}
						>
							{loadingBg ? 
								uploadButtonBg : 
								<img 
									src={bgImgUrl}
									alt="bg" 
									style={{ width: '180px',height:'100px' }}
									onError={this.bgImgError}
								/>
							}
						</Upload>
					</Col>
				</Row>
			</div>
		)
	}
}

const mapDispatch = (dispatch) => {
	return {
		changeHeadImg(value){
			dispatch({
				type: "CHANGE_HEAD_IMG",
				value
			})
		}
	}
}

export default connect(null,mapDispatch)(Lately);